<template>
  <div class="main_content AddOrEditPersonal">
    <father-title :title="fatherTitle"></father-title>
    <div class="box_top contentBox" style="background: none;">
      <div>￥999999.00</div>
      <div>钱包余额</div>
      <div class="box_footer">
        <p>收入￥999999.00</p>
        <p>支出￥999999.00</p>
        <p>提现￥999999.00</p>
      </div>
      <div>
        <el-button type="info" @click="withDraw">我要提现</el-button>
      </div>
      <div class="right_btn">
        <el-button type="info" size="small" >提现记录</el-button>
      </div>
    </div>

    <div class="line">
      <span class="text">钱包记录</span>
    </div>
    <v-table :loading="pageConfig.loading" ref="selection" border :columns="columns" :data="list">
            <template slot-scope="{ row }" slot="status">
              <span>{{status.find((item)=>item.value===row.status).key}}</span>
            </template>
            <template slot-scope="{ row }" slot="operation">
              <Button v-if="$store.state.perms.includes('sys:role:update')" type="primary" size="small" @click="editData(row)">编辑</Button>
              <Button v-if="$store.state.perms.includes('sys:role:delete')" class="button_spacing" type="error" size="small" @click="stopUse(row)">停用</Button>
            </template>
          </v-table>
          <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
          <AddOrEditModal
          v-model="modalCTL.show"
          :title="modalCTL.title"
          :loading="modalCTL.loading"
          width="50%"
          @on-ok="save">
        <Form
            ref="form"
            :model="formValidate"
            :rules="ruleValidate"
            label-position="left"
            :label-width="100"
            slot="content">
          <FormItem label="可提金额" prop="newPassword">
            <Input type="text" v-model="formValidate.newPassword" placeholder="请输入优惠券名称" />
          </FormItem>
          <FormItem label="提现金额" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入发布数量" />
          </FormItem>
          <FormItem label="到账金额" prop="confirmPassword" class="flexOut">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入发布数量" />
            <span>1%手续费</span>
          </FormItem>
          <FormItem label="收款单位名称" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <FormItem label="收款单位银行账号" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <FormItem label="收款单位开户行名称" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <FormItem label="开户行所在市" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <FormItem label="开户行支行名称" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <div>
            温馨提示：在进行提现操作之前，确保您的账户信息和登录方式安全可靠，避免个人信息被泄露或账户被盗用的风险。提现申请后，三天内审核转账，不包含法定节假日，提现收取1%的手续费。
          </div>
        </Form>
      </AddOrEditModal>
  </div>
</template>
<script>
 import {columns, pageConfig, formValidate, ruleValidate, status} from "./pageConfig";
export default {
  components: {
  
  },
  data() {
    return {
      input: "",
      currentPage4: 2,
      fatherTitle: "我的钱包",
        modalCTL: {
          show: false,
          loading: true,
          title: "提现申请"
        },
        columns,
        pageConfig,
        formValidate: {...formValidate},
        ruleValidate,
        status,
        list: [
         
        ],
        searchParams:{
  
        },
     
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      collotype: [
        { name: "收入", color: "#32c732" },
        { name: "支出", color: "#f03838" },
      ]
    };
  },
  methods: {
    handleOnClick(row) {
      console.log(1, row);
      this.$refs.dialog.open();
    },
    cancel(row) {
      console.log(2, row);
    },
    save(){

    },
    withDraw(){
      this.modalCTL.show = true
    }
  },
};
</script>
<style lang="less" scoped>
.flexOut{
  display: flex;
  align-items: center;
  // justify-content: space-between;
  /deep/ .ivu-form-item-content{
    display: flex;  
    margin-left: 0!important;
   
    span{
      width: 80px;
      flex-shrink: 0;
      display: inline-block;
      margin-left: 10px!important;
    }
    .icons{
      margin-right: 10px;
    }
  }
}
.box_top {
  position: relative;
  text-align: center;
  padding: 0.3rem;

  &>div:first-child {
    font-size: 40px;
    color: #217cfc;
  }

  &>div:nth-child(2) {
    font-size: 22px;
    color: rgb(136, 136, 136);
  }

  .box_footer {
    display: flex;
    justify-content: space-around;
    font-size: 40px;
    margin-bottom: 20px;
    color: rgb(240, 56, 56);

    & :first-child {
      color: rgb(50, 199, 50);
    }

    & :last-child {
      color: #000;
    }
  }

  .right_btn {
    position: absolute;
    top: 10%;
    right: 10%;
  }
}

.line {
  height: 0;
  border-top: 1px solid #c7c6c6;
  text-align: left;
  margin-bottom: 20px;
  font-size: 18px;
}

.text {
  position: relative;
  top: -14px;
  padding: 0 10px;
  background-color: #f3f3f3;
}
</style>
